<!-- Dom模板 -->
<template>
  <div class="Advertising">
    <!-- Dom内容 -->
    <!-- 顶部刘海 -->
    <div class="Advertising_ding">
      <div class="Advertising_ding_1">12:00</div>
      <div class="Advertising_ding_2"></div>
      <div class="Advertising_ding_3">图标</div>
    </div>
    <h3 class="Advertising_title">"团餐"膳食饮食</h3>
    <h1 class="Advertising_num">2.0</h1>
    <p class="Advertising_p">全新版本</p>
    <div class="Advertising_footer">
      <img
        src="../../../static/image/61d4612aecaa40278ebc89be891f8c4a.jpg"
        alt=""
      />
      <p>BY PM Gordon</p>
      <p>团体团餐的膳食饮食平台</p>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      isShow: false,
    };
  },
  //组件的挂载
  components: {},
  // Vue方法定义
  methods: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    // this.$store.commit("shpo", 0);
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.$route)
    if(this.$route.path==="/"){
      setTimeout(() => {
      this.$router.push('/home')
      console.log(1);
    }, 1500);
    }
  },
  // 生命周期 - 数据更新完成（访问DOM元素）
  updated() {},
  // 生命周期 - 组件销毁
  destroyed() {},
};
</script>

<style scoped>
.Advertising {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: url('../../../static/image/背景图.jpg');
  background-size: 100% 100%;
  z-index: 2;
}
.Advertising_ding {
  text-align: center;
  width: 100%;
  height: 40px;
}
.Advertising_ding div {
  float: left;
  line-height: 40px;
}
.Advertising_ding_1 {
  width: 25%;
}
.Advertising_ding_2 {
  width: 50%;
  height: 100%;
  border-radius: 0 0 28px 28px;
  background: black;
}
.Advertising_ding_3 {
  width: 25%;
}
.Advertising_title {
  width: 100%;
  height: 250px;
  text-align: center;
  line-height: 250px;
  float: left;
}
.Advertising_num {
  color: white;
  font-size: 150px;
  text-align: center;
  text-shadow: 0 0 4px rgb(221, 145, 3);
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: animateLeft;
}
.Advertising_p {
  margin-top: 20px;
  text-align: center;
  color: rgb(0, 34, 66);
}
.Advertising_footer {
  float: left;
  width: 250px;
  height: 50px;
  margin-top: 130px;
  line-height: 25px;
  margin-left: calc((100% - 250px) / 2);
}
.Advertising_footer img {
  width: 35px;
  height: 35px;
  float: left;
  margin-top: 7px;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 30px;
}
.Advertising_footer p {
  font-size: 12px;
}
@keyframes animateLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
    transform: translate3d(50px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  to {
    transform: none;
  }
}
</style>
